<template>
	<view>
		<!-- 导航栏 -->
		<u-navbar
			:title="title"
			:is-back="true"
			:title-bold="true"
			:background="background"
			title-color="#fff"
			:border-bottom="false"
		></u-navbar>

		<!-- 主体内容 -->
		<view class="content_box">
			<view class="form_box">
				<view class="title">新增收货地址</view>
				<u-form :model="form" ref="uForm">
					<u-form-item label="具体地址" label-width="200" prop="address">
						<u-input v-model="form.address" placeholder="请输入具体地址" />
					</u-form-item>
					<u-form-item label="联系人" label-width="200" prop="contactName">
						<u-input v-model="form.contactName" placeholder="请输入联系人" />
					</u-form-item>
					<u-form-item label="联系方式" label-width="200" prop="contactPhone">
						<u-input v-model="form.contactPhone" placeholder="请输入手机号" />
					</u-form-item>
					<u-form-item label="设为默认地址" label-width="200">
						<u-checkbox-group shape="circle">
							<u-checkbox v-model="form.isDefaultAddress" active-color="#ff9900"></u-checkbox>
						</u-checkbox-group>
					</u-form-item>
				</u-form>
			</view>

			<view class="btn_box">
				<u-button type="warning" size="medium" shape="circle" @click="onsubmit">保存地址</u-button>
			</view>
		</view>
	</view>
</template>

<script>
import { userAddressAdd, userAddressUpdate } from '@/api/user'

export default {
	data() {
		return {
			title: '新增地址',
			background: {
				backgroundColor: '#ff9900'
			},
			form: {
				isDefaultAddress: true
			},
			rules: {
				contactName: [
					{
						required: true,
						message: '请输入联系人',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur'
					}
				],
				address: [
					{
						required: true,
						message: '请输入具体地址',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur'
					}
				],
				contactPhone: [
					{
						required: true,
						message: '请输入手机号',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur'
					},
					{
						// pattern: /^1[345789]\\d{9}$/,
						pattern: /^1[3456789]\d{9}$/,
						// 正则检验前先将值转为字符串
						transform(value) {
							return String(value)
						},
						message: '请输入正确手机号'
					}
				]
			}
		}
	},
	onLoad(option) {
		console.log('option')
		if (option.info) {
			this.title = '修改地址'
			const info = JSON.parse(option.info)
			console.log(info,'添加地址')
			this.form = {
				address: info.address,
				contactPhone: info.contactPhone,
				contactName: info.contactName,
				isDefaultAddress: !!info.isDefaultAddress,
				id: info.id
			}
		} else {
			this.title = '新增地址'
		}
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules)
	},
	methods: {
		onsubmit() {
			this.$refs.uForm.validate(async (valid) => {
				if (!valid) {
					return
				}

				if (this.form.id) {
					await userAddressUpdate({ ...this.form, isDefaultAddress: ~~this.form.isDefaultAddress })
					this.showToast('修改成功')
				} else {
					await userAddressAdd({ ...this.form, isDefaultAddress: ~~this.form.isDefaultAddress })
					this.showToast('新增成功')
				}

				uni.navigateBack()
			})
		}
	}
}
</script>

<style>
page {
	background-color: #eeeeee;
}
</style>

<style lang="less" scoped>
.privacy_box {
	font-size: 26rpx;
	color: #888;
	position: fixed;
	bottom: 100rpx;
	left: 20rpx;
}
.content_box {
	padding: 0 20rpx;
	margin-top: 25rpx;

	.form_box {
		width: 100%;
		// height: 400rpx;
		background-color: #fff;
		padding: 24rpx 28rpx;
		border-radius: 10rpx;

		.title {
			font-size: 36rpx;
		}
	}

	.btn_box {
		display: flex;
		justify-content: center;
		margin-top: 30rpx;
	}
}
</style>
